/**
 * The MIT License (MIT)
 * 生成公司公章
 * @author 透笔度
 * @开源中国 https://my.oschina.net/tbd/blog
 * @码云 https://gitee.com/dgx
 */

const towxImg = require('../../../utils/towxImg');
// 使用 wx.createContext 获取绘图上下文 context
var context = null
// pages/makeseal/makeseal.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    company: "",//印章单位
    name: "",//印章名称
    canvas_width: 300,//画布宽度
    canvas_height: 300,//画布高度
    article: "",
    readyCanvas: false
  },
  //事件处理函数
  companyInput: function (e) {
    this.setData({
      company: e.detail.value
    })
  },
  nameInput: function (e) {
    this.setData({
      name: e.detail.value
    })
  },
  //清除画布
  clearSeal: function () {
    context.clearRect(0, 0, this.data.canvas_width, this.data.canvas_height)
  },
  //生成
  createSeal: function () {
    wx.showLoading({
      title: 'Loading...',
    })
    console.log(this.data.company, this.data.name)
    //清除画布
    this.clearSeal();
    /*
      代码处理
    */
    // 绘制印章边框   
    var width = this.data.canvas_width / 2;
    var height = this.data.canvas_height / 2;
    //绘制样式
    context.setLineWidth(5);//线宽
    context.setStrokeStyle('#fe0101');//颜色
    context.beginPath();
    context.arc(width, height, 110, 0, Math.PI * 2);
    context.stroke();
    context.draw(true);

    //画五角星
    this.create5star(width, height, 35, 0);

    // 绘制印章名称   
    context.setFontSize(14);
    context.setTextBaseline("middle");//设置文本的垂直对齐方式
    context.setTextAlign('center'); //设置文本的水平对对齐方式
    context.setLineWidth(1);//线宽
    context.setFillStyle("#fe0101");
    context.fillText(this.data.name, width, height + 65);
    context.draw(true);

    // 绘制印章单位   
    context.save();
    context.translate(width, height);// 平移到此位置,
    context.setFontSize(16);
    var count = this.data.company.length;// 字数   
    var angle = 4 * Math.PI / (3 * (count - 1));// 字间角度   
    var chars = this.data.company.split("");
    var c;
    for (var i = 0; i < count; i++) {
      c = chars[i];// 需要绘制的字符   
      if (i == 0) {
        context.rotate(5 * Math.PI / 6);
      } else {
        context.rotate(angle);
      };
      context.save();
      context.setFillStyle("#fe0101");
      context.translate(90, 0);// 平移到此位置,此时字和x轴垂直   
      context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴   
      context.fillText(c, 0, 5);// 此点为字的中心点   
      context.draw(true);
      context.restore();
    };
    context.restore();

    this.setData({
      readyCanvas: true
    });
    wx.hideLoading();
  },
  //绘制五角星  
  /** 
   * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上 
   * rotate:绕对称轴旋转rotate弧度 
   */
  create5star: function (sx, sy, radius, rotato) {
    context.save();
    context.setFillStyle("#fe0101");
    context.translate(sx, sy);//移动坐标原点  
    context.rotate(Math.PI + rotato);//旋转  
    context.beginPath();//创建路径  
    //console.log(Math.sin(30*Math.PI/180))
    var dig = Math.PI / 5 * 4;
    for (var i = 0; i < 5; i++) {//画五角星的五条边  
      var x = Math.sin(i * dig);
      var y = Math.cos(i * dig);
      context.lineTo(x * radius, y * radius);
    }
    context.closePath();
    context.fill();
    context.draw(true);
    context.restore();
  },

  saveImage() {
    wx.canvasToTempFilePath({
      canvasId: 'sealCanvas',
      success(res) {
        wx.previewImage({
          current: res.tempFilePath,
          urls: [res.tempFilePath],
        })
        // wx.saveImageToPhotosAlbum({
        //   filePath: res.tempFilePath,
        //   success(res) {
        //     wx.showToast({
        //       title: '保存成功',
        //       icon: 'success'
        //     })
        //   }
        // })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let code = '```\n<view class="container my-page">\n  <view>生成圆形印章</view>\n  <view>\n    <input class="inputc" placeholder="输入印章单位" bindinput="companyInput" value="{{company}}" />\n  </view>\n  <view>\n    <input class="inputc" placeholder="输入印章名称" bindinput="nameInput" value="{{name}}" />\n  </view>\n  <view>\n    <button type="default" hover-class="other-button-hover" bindtap="createSeal">生成</button>\n  </view>\n  <view>\n    <canvas style="width: {{canvas_width}}px; height: {{canvas_height}}px;" canvas-id="sealCanvas" disable-scroll="true"></canvas>\n  </view>\n</view>\n```\n\n```\n// 使用 wx.createContext 获取绘图上下文 context\nvar context = null\n// pages/makeseal/makeseal.js\nPage({\n  /**\n   * 页面的初始数据\n   */\n  data: {\n    company: "",//印章单位\n    name: "",//印章名称\n    canvas_width:300,//画布宽度\n    canvas_height: 300//画布高度\n  },\n  //事件处理函数\n  companyInput: function (e) {\n    this.setData({\n      company: e.detail.value\n    })\n  },\n  nameInput: function (e) {\n    this.setData({\n      name: e.detail.value\n    })\n  },\n  //清除画布\n  clearSeal:function(){\n    context.clearRect(0, 0, this.data.canvas_width, this.data.canvas_height)\n  },\n  //生成\n  createSeal:function(){\n      console.log(this.data.company, this.data.name)\n      //清除画布\n      this.clearSeal();\n      /*\n        代码处理\n      */\n      // 绘制印章边框   \n      var width = this.data.canvas_width / 2;\n      var height = this.data.canvas_height / 2;\n      //绘制样式\n      context.setLineWidth(5);//线宽\n      context.setStrokeStyle("#fe0101");//颜色\n      context.beginPath();\n      context.arc(width, height, 110, 0, Math.PI * 2);\n      context.stroke();\n      context.draw(true);\n      //画五角星\n      this.create5star(width, height, 35, 0);\n      // 绘制印章名称   \n      context.setFontSize(14);\n      context.setTextBaseline("middle");//设置文本的垂直对齐方式\n      context.setTextAlign("center") ; //设置文本的水平对对齐方式\n      context.setLineWidth(1);//线宽\n      context.setFillStyle("#fe0101");  \n      context.fillText(this.data.name, width, height + 65);\n      context.draw(true);\n      // 绘制印章单位   \n      context.save();\n      context.translate(width, height);// 平移到此位置,\n      context.setFontSize(16);\n      var count = this.data.company.length;// 字数   \n      var angle = 4 * Math.PI / (3 * (count - 1));// 字间角度   \n      var chars = this.data.company.split("");\n      var c;\n      for (var i = 0; i < count; i++) {\n        c = chars[i];// 需要绘制的字符   \n        if (i == 0){\n          context.rotate(5 * Math.PI / 6);\n        } else {\n          context.rotate(angle);\n        };\n        context.save();\n        context.setFillStyle("#fe0101");\n        context.translate(90, 0);// 平移到此位置,此时字和x轴垂直   \n        context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴   \n        context.fillText(c, 0, 5);// 此点为字的中心点   \n        context.draw(true);\n        context.restore();\n      };\n      context.restore();\n  },\n  //绘制五角星  \n  /** \n   * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上 \n   * rotate:绕对称轴旋转rotate弧度 \n   */\n  create5star:function( sx, sy, radius, rotato){\n      context.save();  \n      context.setFillStyle("#fe0101") ;  \n      context.translate(sx, sy);//移动坐标原点  \n      context.rotate(Math.PI + rotato);//旋转  \n      context.beginPath();//创建路径  \n      //console.log(Math.sin(30*Math.PI/180))\n      var dig = Math.PI / 5 * 4;  \n      for(var i = 0;i< 5;i++){//画五角星的五条边  \n        var x = Math.sin(i * dig);\n        var y = Math.cos(i * dig);\n        context.lineTo(x * radius, y * radius);\n      }\n      context.closePath();\n      context.fill();\n      context.draw(true);\n      context.restore();  \n  },\n  /**\n   * 生命周期函数--监听页面显示\n   */\n  onShow: function () {\n    // 使用 wx.createContext 获取绘图上下文 context\n    context = wx.createCanvasContext("sealCanvas")\n  },\n})\n```\n';

    let article = towxImg.dealWithRichText(code);
    this.setData({ article });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 使用 wx.createContext 获取绘图上下文 context
    context = wx.createCanvasContext('sealCanvas')
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})